<template>
  <div class="bookmarks-tab__layout">
    <div class="bookmarks-navigation__bar">
      <navigation-bar :nav-items="navItems" :separate="'>'"></navigation-bar> 
    </div>
    <div class="bookmarks-items__layout">
      <bookmarks-item v-for="item in itemsList" :key="item.id" :data-item="item" :gutter="10" @openPage="openPageHandle($event)"></bookmarks-item>
    </div>
    <bookmarks-tab :items-group="itemsGroup" @openPage="openPageHandle($event)"></bookmarks-tab>
  </div>
</template>
<script>
import BookmarksItem from '@/components/Bookmarks/BookmarksItem'
import BookmarksTab from '@/components/Bookmarks/BookmarksTab'
import NavigationBar from '@/components/Navigation/NavigationBar.vue'
export default {
  components: {
    BookmarksItem, 
    BookmarksTab,
    NavigationBar
  },
  props: {
    navItems: {
      type: Array,
      default: () => []
    },
    itemsList: {
      type: Array,
      default: () => []
    },
    itemsGroup: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {

    }
  },
  methods: {
    openPageHandle(param){
      this.$emit('openPage', param);
    }
  }
}
</script>
<style scoped>

.bookmarks-navigation__bar{
  text-align: left;
}

.bookmarks-items__layout{
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0px;
}

</style>